﻿import QtQuick 2.0
import QtQuick 2.12
import QtQuick 2.9
import QtQuick.Controls 2.2
import QtQuick.Window 2.12
import QtMultimedia 5.14
import TaoQuick 1.0
import Top 1.0
import Qt.labs.platform 1.1

Window {
    id:comuWindowId
    width: 640
    height: 480
    visible: true
    title: qsTr("视频播放窗口")
    property string moviePath: ""
    property int flag: 1
    onVisibleChanged: {
//        //窗口显示就播放视频 不显示就停止视频
//        if(visible && flag == 1) {
//            mediaPlayer.play()
//        }else {
//            mediaPlayer.stop()
//        }
    }

    Rectangle {
       color: "black"
       anchors.fill: parent

       MediaPlayer {
           id: mediaPlayer
           source: moviePath
           autoPlay: true
           volume: 0
       }

       VideoOutput {
           id: videoOutput
           anchors.fill: parent
           source: mediaPlayer
           property var videoProgressBar: 0.5
           //进度条用来控制视频的进度
           Rectangle {
               id: progressBar
               width: parent.width*0.8
               anchors.left: parent.left
               anchors.leftMargin: 10
               anchors.bottom: parent.bottom
               anchors.bottomMargin: 10
               height: 20 * videoOutput.videoProgressBar
               color: "white"
               radius: 5
               //设置动画效果 1s
               Behavior on height {
                   NumberAnimation {
                       id: behaveNumAnimation
                       duration: 1000
                   }
               }

               Rectangle {
                   anchors.left: parent.left
                   anchors.top: parent.top
                   anchors.topMargin: 3
                   anchors.bottom: parent.bottom
                   anchors.bottomMargin: 3
                   radius: 5
                   width: mediaPlayer.duration > 0?parent.width*mediaPlayer.position/mediaPlayer.duration:0
                   onWidthChanged: {
//                       //当前播放时间
//                       console.log("position = " + mediaPlayer.position)
//                       //总时间
//                       console.log("duration = " + mediaPlayer.duration)
                   }

                   color: "yellow"
               }
               //拖动来控制播放进度
               MouseArea {
                   anchors.fill: parent
                   hoverEnabled: true

                   //这个是按下就有响应，Clicked是按下松开后才有反应
                   onPressed: {
                       if (mediaPlayer.seekable) {
                           mediaPlayer.seek(mediaPlayer.duration * mouse.x/width);
                       }
                   }
                   onPositionChanged: {
                       console.log("sbgg")
                       //拖动使能并且当时鼠标按下
                       if (mediaPlayer.seekable && pressed) {
                           mediaPlayer.seek(mediaPlayer.duration * mouse.x/width);
                       }
                   }
                   onReleased: {

                   }

                   onEntered:  {
                       behaveNumAnimation.duration = 300
                       videoOutput.videoProgressBar = 1
                   }
                   onExited: {
                       behaveNumAnimation.duration = 2000
                       videoOutput.videoProgressBar = 0.5
                   }
               }
           }
           CusButton_ImageBackground {
               height: 30
               width: 30
               anchors.left: parent.left
               anchors.leftMargin: 5
               anchors.top: parent.top
               anchors.topMargin: 5
               btnImgUr: "qrc:/Image/back.png"
               onClicked: {
                   console.log("点击了返回")
                   comuWindowId.visible=false;
               }
           }
           Row {
               anchors.right: parent.right
               anchors.rightMargin: 10
               anchors.bottom: parent.bottom
               //暂停
               CusButton_ImageBackground {
                   height: 30
                   width: 30
                   anchors.bottom: parent.bottom
                   btnImgUr: {
                       if(flag == 1)
                            return "qrc:/Image/stop.png"
                       else {
                            return "qrc:/Image/start.png"
                       }
                   }

                   onClicked: {
                       if(flag == 1){
                           //visible
                           mediaPlayer.stop()
                           flag = 0
                       }
                       else if(flag == 0){
                           mediaPlayer.play()
                           flag = 1
                       }
                   }
               }
               Column {
                   spacing: 20
                   Rectangle {
                       id: progressBar1
                       width: 10
                       //visible: false
                       height: 100
                       color: "red"
                       radius: 2
                       visible: false
                       anchors.horizontalCenter: parent.horizontalCenter
                       Rectangle {
                           anchors.horizontalCenter: parent.horizontalCenter
                           anchors.bottom: parent.bottom
                           width: parent.width*0.3
                           height: mediaPlayer.volume*parent.height
                           color: "green"
                       }
                       //拖动来控制播放进度
                       MouseArea {
                           anchors.fill: parent
                           //这个是按下就有响应，Clicked是按下松开后才有反应
                           onPressed: {
                               mediaPlayer.volume=(progressBar1.height-mouse.y)/progressBar1.height
                           }
                           onPositionChanged: {
                               mediaPlayer.volume=(progressBar1.height-mouse.y)/progressBar1.height
                           }
                       }
                   }
                   //因为Item没有高和宽，。所以他的子控件就不会有的 所以没有显示权限，如果一定要这么写
                   Item {
                       id:itemId
                       width: 30
                       height: 30
                       CusButton_ImageBackground {
                           height: parent.height
                           width: parent.width
                           anchors.bottom: parent.bottom
                           btnImgUr: "qrc:/Image/volume.png"
                           onClicked: {
                               progressBar1.visible = !progressBar1.visible
                           }
                       }
                   }
               }
               //扩大
               CusButton_ImageBackground {
                   height: 30
                   width: 30
                   anchors.bottom: parent.bottom
                   btnImgUr: {
                       if(comuWindowId.visibility == Window.FullScreen)
                            return "qrc:/Image/reduce.png"
                       else {
                            return "qrc:/Image/boost.png"
                       }
                   }

                   onClicked: {
                       //如果当前窗口是全屏 就恢复到常态 否则就全屏
                       if(comuWindowId.visibility == Window.FullScreen)
                            comuWindowId.showNormal()
                       else {
                           comuWindowId.showFullScreen()
                       }
                   }
               }

           }
        }
   }
}
